<template>
  <div class="m-find-car">
    <img class="find-bg" :src="locale == 'en-US' ? enFindBg : zhFindBg" :alt="`${$t('platform')}`" />
    <div class="find-form">
      <div class="form-regin">
        <div class="form-title">{{ $t("purchasingMachine") }}</div>
        <el-form :model="form1" :rules="rules1" ref="rulesForm1">
          <el-form-item :label="$t('equipmentType')" prop="typeId">
            <el-select v-model="form1.typeId" :placeholder="$t('pleaseSelect')" @change="getMachineBrand" class="enWidth">
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('equipmentBrand')" prop="brandId" key="brandId">
            <el-select v-model="form1.brandId" :placeholder="$t('pleaseSelect')" @change="getMachineModel" class="enWidth">
              <el-option v-for="item in brandList" :key="item.id" :label="item.brandName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            :label="$t('equipmentModel')"
            prop="modelId"
            key="modelId"
            v-if="form1.typeId == 47 || form1.typeId == 49 || form1.typeId == 54 || form1.typeId == 55"
          >
            <el-select v-model="form1.modelId" :placeholder="$t('pleaseSelect')" class="enWidth">
              <el-option v-for="item in modelList" :key="item.id" :label="item.modelName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('manufactureYear')" prop="manufactureYear" key="manufactureYear">
            <el-select v-model="form1.manufactureYear" :placeholder="$t('pleaseSelect')" class="enWidth">
              <el-option v-for="item in YearsList" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('workingHours')" prop="workingHours" key="workingHours">
            <el-select v-model="form1.workingHours" :placeholder="$t('pleaseSelect')" class="enWidth">
              <el-option
                v-for="(item, index) in workingHoursList"
                :key="item"
                :label="$t('workingHoursData')[index]"
                :value="$t('workingHoursData')[index]"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('armLength')" prop="armSpan" key="armSpan" v-if="form1.typeId == 50">
            <el-input v-model="form1.armSpan" :placeholder="$t('pleaseEnter')" class="enWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('emissionStandard')" prop="emissionStandard" v-if="form1.typeId == 50 || form1.typeId == 53 || form1.typeId == 54">
            <el-select v-model="form1.emissionStandard" :placeholder="$t('pleaseSelect')" class="enWidth">
              <el-option
                v-for="(item, index) in emissionStandardList"
                :key="item"
                :label="$t('emissionStandardData')[index]"
                :value="$t('emissionStandardData')[index]"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('loadingVolume')" prop="loadCapacity" key="loadCapacity" v-if="form1.typeId == 53">
            <el-input v-model="form1.loadCapacity" :placeholder="$t('pleaseEnter')" class="enWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('exportPressure')" prop="exportPressure" key="exportPressure" v-if="form1.typeId == 51 || form1.typeId == 52">
            <el-input v-model="form1.exportPressure" :placeholder="$t('pleaseEnter')" class="enWidth"></el-input>
          </el-form-item>
          <el-form-item :label="$t('tonnage')" prop="tonnage" key="tonnage" v-if="form1.typeId == 54">
            <el-input v-model="form1.tonnage" :placeholder="$t('pleaseEnter')" class="enWidth"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="form-regin">
        <div class="onther-info">{{ $t("otherInformation") }}</div>
        <el-input type="textarea" v-model="otherInfo" :placeholder="$t('pleaseEnter') + '...'"></el-input>
      </div>
      <div class="form-regin" style="border-bottom: 0">
        <div class="onther-info">{{ $t("contactInformation") }}</div>
        <el-form :model="form2" :rules="rules2" ref="rulesForm2">
          <el-form-item :label="$t('userName')" prop="userName">
            <el-input v-model="form2.userName" :placeholder="$t('pleaseEnter')" class="enWidth"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="userPhone" v-if="locale == 'zh-CN'">
            <el-input v-model="form2.userPhone" placeholder="请输入" class="enWidth">
              <el-select v-model="form2.phoneCountryCode" slot="prepend">
                <el-option v-for="(item, index) in $optionsData.countrycodeList" :key="index" :label="item.area" :value="item.area">
                  <span style="float: left">{{ item.cnname }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.area }}</span>
                </el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="Phone Number" v-if="locale == 'en-US'">
            <el-input v-model="form2.userPhone" placeholder="Please Enter" class="enWidth">
              <el-select v-model="form2.phoneCountryCode" slot="prepend">
                <el-option v-for="(item, index) in $optionsData.countrycodeList" :key="index" :label="item.area" :value="item.area">
                  <span style="float: left">{{ item.enname }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.area }}</span>
                </el-option>
              </el-select>
            </el-input>
          </el-form-item>
          <el-form-item label="Email Address" prop="emailAddress" v-if="locale == 'en-US'">
            <el-input v-model="form2.emailAddress" placeholder="Please Enter" class="enWidth"></el-input>
          </el-form-item>
          <el-form-item label="WhatsApp" prop="whatsApp" v-if="locale == 'en-US'">
            <el-input v-model="form2.whatsApp" placeholder="Please Enter" class="enWidth"></el-input>
          </el-form-item>
        </el-form>
        <div class="add-region">
          <el-button class="add-clue" @click="handleConfirm" :disabled="isDisabled">{{ $t("submit") }}</el-button>
        </div>
      </div>
    </div>
    <!-- WhatsApp -->
    <!-- <WhatsAppM v-if="locale == 'en-US'" /> -->
    <!-- 底部信息 -->
    <FooterM></FooterM>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "M-findCar",
  layout: "mobile",
  components: {},
  data() {
    return {
      zhFindBg: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/m-find-bg.png",
      enFindBg: "https://yunlian-oss-product.oss-cn-hangzhou.aliyuncs.com/website/m-find-bg-en.png",
      form1: {
        typeId: "", //设备类型
        brandId: "", //设备品牌
        modelId: "", //设备型号
        manufactureYear: "", //出厂年份
        workingHours: "", //小时数
        armSpan: "", //臂架长度
        emissionStandard: "", //排放标准
        loadCapacity: "", //装载方量
        exportPressure: "", //出口压力
        tonnage: "" //起重总量
      },
      rules1: {
        typeId: [{ required: true, trigger: "change", message: this.$i18n.t("selectEquipmentType") }],
        brandId: [{ required: true, trigger: "change", message: this.$i18n.t("selectEquipmentBrand") }],
        modelId: [{ required: true, trigger: "change", message: this.$i18n.t("selectEquipmentModel") }],
        manufactureYear: [{ required: true, trigger: "change", message: this.$i18n.t("selectManufactureYear") }],
        workingHours: [{ required: true, trigger: "change", message: this.$i18n.t("selectWorkingHours") }],
        armSpan: [{ required: true, trigger: "blur", message: this.$i18n.t("EnterArmLength") }],
        emissionStandard: [{ required: true, trigger: "change", message: this.$i18n.t("SelectEmissionStandard") }],
        loadCapacity: [{ required: true, trigger: "blur", message: this.$i18n.t("EnterLoadingVolume") }],
        exportPressure: [{ required: true, trigger: "blur", message: this.$i18n.t("EnterExportPressure") }],
        tonnage: [{ required: true, trigger: "blur", message: this.$i18n.t("EnterTonnage") }]
      },
      otherInfo: "", //其他信息
      form2: {
        userName: "", //姓名
        phoneCountryCode: 86, //区号
        userPhone: "", //手机号
        emailAddress: "", //邮箱地址
        whatsApp: "" //whatsApp账号
      },
      rules2: {
        userName: [{ required: true, trigger: "blur", message: this.$i18n.t("EnterUserName") }],
        userPhone: [{ required: true, trigger: "blur", message: "请输入手机号" }],
        emailAddress: [{ required: true, trigger: "blur", message: "Enter Email Address" }],
        whatsApp: [{ required: true, trigger: "blur", message: "Enter WhatsApp" }]
      },
      modelList: [], //型号列表
      YearsList: [], //最近20年列表
      workingHoursList: ["不限", "2000小时以内", "2000-5000小时", "5000-10000小时", "10000小时以上"], //小时数列表
      emissionStandardList: ["国二", "国三", "国四", "国五", "国六"], //排放标准列表
      isDisabled: false //防触控
    }
  },
  head() {
    return {
      title: this.$i18n.t("headTitle"),
      meta: [
        {
          hid: "keywords",
          name: "keywords",
          content: this.$i18n.t("haeaKeyContent")
        },
        {
          hid: "description",
          name: "description",
          content: this.$i18n.t("haeaDecContent")
        }
      ]
    }
  },
  async asyncData({ app, params }) {
    let typeList = []
    let brandList = []
    try {
      // 设备机型
      let typeRes = await app.$api.machineType()
      typeList = (typeRes.data || []).filter((v) => v.id != 56 && v.id != 57)
      // 设备品牌
      let brandRes = await app.$api.machineBrand({ typeId: 47 })
      brandList = brandRes.data || []
      brandList.unshift(app.i18n.locale == "en-US" ? { brandName: "No limit", id: 0 } : { brandName: "不限", id: 0 })
    } catch (error) {
      console.log(error)
    }
    return {
      typeList, //设备类型列表
      brandList //设备品牌列表
    }
  },
  props: {},
  computed: { ...mapState(["locale"]) },
  async mounted() {
    this.getLast20Years()
    this.getPoint()
  },
  methods: {
    getLast20Years() {
      const currentYear = new Date().getFullYear()
      const years = []
      for (let i = 0; i <= 20; i++) {
        years.push(currentYear - i)
      }
      years.unshift(this.locale == "en-US" ? "No limit" : "不限")
      this.YearsList = years
    },
    async getMachineBrand() {
      this.form1.brandId = ""
      this.form1.modelId = ""
      this.form1.manufactureYear = ""
      this.form1.workingHours = ""
      this.form1.armSpan = ""
      this.form1.emissionStandard = ""
      this.form1.loadCapacity = ""
      this.form1.exportPressure = ""
      this.form1.tonnage = ""
      this.$nextTick(() => {
        this.$refs.rulesForm1.clearValidate()
      })
      try {
        let res = await this.$api.machineBrand({ typeId: this.form1.typeId })
        this.brandList = res.data || []
        this.brandList.unshift(this.locale == "en-US" ? { brandName: "No limit", id: 0 } : { brandName: "不限", id: 0 })
      } catch (error) {
        console.log(error)
      }
    },
    async getMachineModel() {
      this.form1.modelId = ""
      try {
        let res = await this.$api.machineModel({ brandId: this.form1.brandId })
        this.modelList = res.data || []
        this.modelList.unshift(this.locale == "en-US" ? { modelName: "No limit", id: 0 } : { modelName: "不限", id: 0 })
      } catch (error) {
        console.log(error)
      }
    },
    async handleConfirm() {
      this.$refs.rulesForm1.validate((valid1) => {
        if (valid1) {
          this.$refs.rulesForm2.validate((valid2) => {
            if (valid2) {
              let typeName = "",
                brandName = "",
                modelName = ""
              this.typeList.map((item) => {
                if (item.id == this.form1.typeId) {
                  typeName = item.name
                }
              })
              this.brandList.map((item) => {
                if (item.id == this.form1.brandId) {
                  brandName = item.brandName
                }
              })
              this.modelList.map((item) => {
                if (item.id == this.form1.modelId) {
                  modelName = item.modelName
                }
              })
              this.isDisabled = true
              this.$api
                .addClue({
                  ...this.form1,
                  typeName,
                  brandName,
                  modelName,
                  otherInfo: this.otherInfo,
                  ...this.form2,
                  isOverseasShow: this.locale == "en-US" ? 1 : 2 //1仅海外，2仅国内，英文版为海外，中文版为国内
                })
                .then(
                  (res) => {
                    this.$message.success(this.$i18n.t("submittedSuccessfully"))
                    setTimeout(() => {
                      location.reload()
                    }, 1500)
                  },
                  (error) => {
                    this.isDisabled = false
                  }
                )
            } else {
              console.log("error submit!!")
              return false
            }
          })
        } else {
          console.log("error submit!!")
          return false
        }
      })
    },
    async getPoint() {
      let params = await this.$optionPoint.sendUrl(window, navigator, document)
      this.$api.burySave({ ...params }).then((res) => {})
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.m-find-car {
  width: 100%;
  height: 100%;
  .find-bg {
    width: 100%;
    height: 1024px;
  }
  .find-form {
    width: 100%;
    height: 100%;
    padding-bottom: 500px;
    .form-regin {
      padding: 77px 77px 0;
      box-sizing: border-box;
      border-bottom: 41px solid #f6f7f8;
      .form-title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 82px;
        color: #121212;
        line-height: 123px;
        margin-bottom: 77px;
      }
      .el-form {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .el-form-item {
          display: flex;
          align-items: center;
          ::v-deep .el-form-item__label {
            min-width: 380px;
            text-align: left;
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 72px;
            color: #333;
          }
          .el-input-group__prepend {
            .el-select {
              width: 300px;
              ::v-deep .el-input__inner {
                padding-left: 0;
                padding-right: 120px;
                text-align: center;
              }
            }
          }
        }
        .is-required {
          &::before {
            content: "*";
            color: #f56c6c;
            margin-right: 4px;
          }
        }
      }
      .enWidth {
        width: 900px;
      }
      .onther-info {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 82px;
        color: #121212;
        line-height: 102px;
        margin-bottom: 77px;
      }
      .el-textarea {
        width: 100%;
        margin-bottom: 77px;
        ::v-deep .el-textarea__inner {
          height: 512px;
        }
      }
      .add-region {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 200px;
        .add-clue {
          width: 768px;
          height: 205px;
          text-align: center;
          background: #d71519;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 72px;
          color: #fff;
        }
      }
    }
  }
}
</style>
